<template>
	<view
		class="around"
		@click.stop="pageToDistrict"
		:style="{
			backgroundImage: `url(${bgUrl})`,
		}"
	>
		<view class="around-swiper">
			<my-carousel :imgList="listData"></my-carousel>
		</view>
	</view>
</template>
<script setup lang="ts">
import MyCarousel from "@/pages/home/components/my-carousel.vue"
import { pageToDistrict } from "@/utils/page-redirect"

const imgBaseUrl = inject("imgBaseUrl")

const props = defineProps({
	bgUrl: {
		type: String,
		default: "https://si1.zhijingyou.com/mini/hy/default-district.png",
	},
	listData: {
		type: Array,
		default: [],
	},
})
</script>

<style lang="scss" scoped>
.around {
	height: 320rpx;
	background-size: cover;
	background-position: center center;
	padding: 24rpx;
	position: relative;
	.around-swiper {
		position: absolute;
		right: 290rpx;
		bottom: 20rpx;
	}
}
</style>
